import './newEdit.css'
import Axios from 'axios'
import React from 'react'
import {Row, Col, Input, Button,Select,Form } from 'antd';
const {Option} = Select
const InputList = [
  {
    type:"input",
    label:"人员代码",
    value:'',
    disabled:false,
    placeholder:'员工号码(必填)',
    rules:[
      { required:true, message:'请输人员代码' },
      {
        len: 6, message:'最少6位'
      },
      {
        max:8,message:'最多8位'
      }
    ]
  },
  {
    type:"input",
    label:"真实姓名",
    value:'',
    disabled:false,
    placeholder:'请输入员工姓名(必填)',
    rules:[
      { required:true, message:'请输入真实姓名' }
    ]
  },
  {
    type:"selsct",
    label:"单位名称",
    value:'',
    disabled:false,
    placeholder:['车险营运部440303','罗湖支公司 440302','西湖支公司 440303','新洲支公司 440304','华强支公司 440306']
  },
  {
    type:"selsct",
    label:"数据权限",
    value:'',
    disabled:false,
    placeholder:['深圳分公司','所有经营机构','改成标准的名字：','信息技术部/大数据中心','客户服务管理部','出单中心','理赔事业部','办公室/风险管理研究中心','盐田支公司','龙岗支公司','车险营业部']
  },
  {
    type:"input",
    label:"手机号码",
    value:'',
    disabled:false,
    placeholder:'请输入手机号码',
    rules:[
      { required:true, message:'请输入正确手机号码' },
      {
        len: 11, message:'号码为11位'
      },
      {
        type:'number',message:'只能为数字类型'
      }
    ]
  },
  {
    type:"input",
    label:"邮箱",
    disabled:false,
    placeholder:'请输入公司邮箱',
    rules:[
      { required:true, message:'请输入正确公司邮箱' },
      {
        type:'email',message:'只能为邮箱类型'
      }
    ]
  },
  {
    type:"select",
    label:"状态",
    value:'',
    disabled:true,
    placeholder:['启用','禁用']
  }
]
const NewEdit = (props)=>{
  if (props.location.query.disple){
    let newData =  JSON.parse(window.localStorage.getItem('userset'))
    InputList[0].value= newData.staffId
    InputList[1].value = newData.name
    InputList[0].disabled = true
    InputList[1].disabled = true

  }else {
    InputList[0].disabled = false
    InputList[1].disabled = false
  }
  const {getFieldDecorator} = props.form
  return (
    <div className="wrop">
      <div className="center">
          <Row>
            {
              InputList.map((item,index) => {
                return (
                  <Col span={8} key={item.label} className="page-col">
                    <label>{item.label}：</label>
                    {
                      item.type === 'input' ? index === 0 && props.location.query.disple || index === 1 && props.location.query.disple ?
                      <Input value={item.value} disabled={item.disabled} placeholder={item.placeholder} style={{width:'60%',margin:'0 12px'}} onChange={(e)=>{
                        item.value = e.target.value
                      }}/> :
                      <Form.Item className="pagr-form__item">
                         {
                            getFieldDecorator(item.placeholder,{
                              rules:item.rules
                            })(
                              <Input placeholder={item.placeholder} style={{width:'90%',margin:'0 12px'}} onChange={(e)=>{
                                item.value = e.target.value
                              }}/>
                            )
                          }
                      </Form.Item>: <Select  disabled={item.disabled} defaultValue={item.placeholder[0]} style={{width:'60%',margin:'0 12px'}} onChange={(e)=>{
                        item.value = e
                      }}>
                      {
                        item.placeholder.map((data,index) => {
                          return (
                            <Option value={data} key={index}>{data}</Option>
                          )
                        })
                      }
                    </Select>
                    }
                    <span style={{color:'red'}}>*</span>
                  </Col>
                )
              })
            }
            </Row>
            <div style={{marginTop:'95px'}}>
              <Button style={{marginRight:'60px',width:'90px'}} size="large" onClick={()=>{handleRem()}}>返回</Button>
              <Button type="danger" size="large" style={{background:'rgba(218, 37, 28, 1)',width:'90px'}} onClick={()=>{handleAdd()}}>保存</Button>
            </div>
      </div>
    </div>
  )
  function handleRem(){
    props.history.push('/accoutmanage')
  }
  function handleAdd(){
    let newList = InputList.map((item,index)=>{
      if (index === 2 && item.value === '') {
        return '车险营运部'
      }
      if (index === 3 && item.value === '') {
        return '深圳分公司'
      }
      if (index === 6 && item.value === '') {
        return '启用'
      }
      return item.value
    })
    if(props.location.query.disple){
      let newData =  JSON.parse(window.localStorage.getItem('userset'))
      const id = newData.id
      Axios.patch(`/staffs/${id}`,{
        company: newList[2],
        role: newList[2],
        dataPerm: newList[2],
        pening: newList[6],
        emila: newList[5],
        value: id,
        call: newList[4]
      }).then(response => {
        props.history.push('/accoutmanage')
      })
    }else {
      Axios.post('/staffs',{
        staffId: newList[0],
        name: newList[1],
        company: newList[2],
        role: newList[2],
        dataPerm: newList[2],
        pening: newList[6],
        emila: newList[5],
        value: Math.random(),
        call: newList[4]
      }).then(response => {
        props.history.push('/accoutmanage')
      })
    }


  }
}
export default Form.create()(NewEdit)
